<template>
  <div class='inviteRegister' id="mycanvas">
    <div class='top'>
       <img class='logo' src="~@/assets/images/myInfo/logoShare.png" alt="">
       <img width='100%' src="~@/assets/images/myInfo/topShare.png" alt="">
    </div>
    <div class='content'>
      <img class='contentImg' src="~@/assets/images/myInfo/circleShare.png" alt="">
      <div class='contentText'>
        <div class='contentFlex'>
          <div class='circle'>1</div> <p>长按保存图片</p>
        </div>
        <div class='contentFlex'> <div class='circleImg'></div></div>
        <div class='contentFlex'>
          <div class='circle'>2</div> <p>发送邀请给客户</p>
        </div>
        <div class='contentFlex'> <div class='circleImg'></div></div>
        <div class='contentFlex'>
          <div class='circle'>3</div> <p>客户通过二维码注册成功</p>
        </div>
        <div class='contentFlex'><div class='circleImg'></div></div>
        <div class='contentFlex'>
          <div class='circle'>4</div> <p>邀请成功</p>
        </div>
      </div>
      <!-- <div class='shareBtn' @click='shareBtn'>立即邀请 </div> -->
      <div class='nameStyle'>
        <p>{{name}}</p>
        <p>{{comName}}</p>
      </div>
      <div  id='qrcodeS' style='display:none'></div>
      <div id='qrcode'>
        <img id='qrcodeImg' :src="canvasSrc">
      </div>
    </div>
     <img class='oneShare' src="~@/assets/images/myInfo/oneShare.png" alt="">
     	<!-- 遮挡层 -->
		<div class='cover' v-if='coverShow' @click='coverShow=false'>
			<img :src="imgg" alt="" style="width:100%;" id="poster" >
			<!-- <div class='coverText'>
				<p>点击右上角“...”进行分享</p>
			</div> -->
		</div>
  </div>
</template>
<script lang="ts">
import 'vant/lib/dialog/style';
import 'vant/lib/field/style';
import 'vant/lib/picker/style';
import 'vant/lib/cell/style';
import 'vant/lib/overlay/style';
import { Dialog , Field, Picker, Cell,Overlay  } from 'vant';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { cloudApi } from '@/api/indexApi';
import QRCode from "qrcodejs2";

import '../../style/reservaIndex_index.css';
import VueClipboard from 'vue-clipboard2'
import html2canvas from 'html2canvas'
@Component({
  components: {
    [Cell.name]: Cell, },
})
export default class MainPage extends Vue {
  coverShow: any=false;
  informationId:any = '';
  name:any=''
  comName:any=''
  userId:any=''
  invitationCode:any=''
  invitationAES:any=''
  canvasSrc:any=''
  imgg:any=''
  token:any=''
  userIdJigou:any=''
  mounted(){
    document.title = '邀请注册'
    this.name=this.$route.query.name
    this.token=this.$route.query.token
    this.userIdJigou=this.$route.query.userId
    this.getJigou()
  }
 getJigou(){//获取机构
  let _this =  this
  let data={
     token:_this.token,
     userId:_this.userIdJigou
   }
   cloudApi.recommendPage(data).then(res => {
     console.log('返参',res)
     if(res.data.result.header.statusCode == '00000000'){
        _this.comName=res.data.result.body.comName
        _this.invitationCode=res.data.result.body.invitationCode
        _this.qrcode()
        setTimeout(function(){_this.saveImg("mycanvas")},500)
     }else{
       Dialog.alert({ title: '温馨提示', message: res.data.result.header.message })
     }
    })
  }
  saveImg(val:any) {
				 if(this.imgg){
					 return
				 }
				 var that=this
				  window.pageYoffset = 0;
			      document.documentElement.scrollTop = 0;
			      document.body.scrollTop = 0;
				  // 先获取你要转换为img的dom节点
				  var node = document.getElementById(val);//传入的id名称
				   console.log(val)
				  var width = node.offsetWidth; //dom宽
			      var height = node.offsetHeight; //dom高
			      var scale = 2; //放大倍数 这个相当于清晰度 调大一点更清晰一点
			      html2canvas(node, {
			        width: width,
			        heigth: height,
			        backgroundColor: null, //背景颜色 为null是透明
			        dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
			        scale: scale,
			        X:0,
			        Y:0,
			        scrollX: 0, //如果左边多个白边 设置该偏移-3 或者更多
			        scrollY: 0,
			        useCORS: true, //是否使用CORS从服务器加载图像 !!!
			        allowTaint: true //是否允许跨域图像污染画布  !!!
			      }).then(canvas => {
			        var url = canvas.toDataURL(); //这里上面不设值cors会报错
			        var a = document.createElement("a");//创建一个a标签 用来下载
			        a.download = "pic"; //设置下载的图片名称
			        var event = new MouseEvent("click");//增加一个点击事件
			        a.href = url;//此处的url为base64格式的图片资源 
					that.imgg=url
          that.immmmflag=false
          that.coverShow=true;
					console.log(that.imgg)
			        a.dispatchEvent(event); //触发a的单击事件 即可完成下载
			      });
				}
 
  //根据地址生成二维码
  qrcode() {
    var key = CryptoJS.enc.Utf8.parse("XtbbzM9s6itY2Oov");
    var iv = CryptoJS.enc.Utf8.parse('HTMBANKCRYPTOIVV');
    var srcs = CryptoJS.enc.Utf8.parse(this.invitationCode);
    var encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv:iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    this.invitationAES=encodeURIComponent(encrypted.toString())
    console.log('AES加密',encodeURIComponent(encrypted.toString()))
    let qrcode = new QRCode('qrcodeS', {
      width: 128,
      height: 128,
      text:'https://axt.chinalife-p.com.cn/unifUserH5/#/regist?invitationCode='+this.invitationAES+'&systemCode=S002'//生产
      // text:'http://gscapptest.chinalife-p.com.cn:8060/unifUserH5/#/regist?invitationCode='+this.invitationAES+'&systemCode=S002'//测试
    })     
    this.canvasSrc=document.getElementsByTagName('canvas')[0].toDataURL("image/png");
  }
}
</script>
<style lang="less" scoped>
.inviteRegister{
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(#FB5E37, #BA0511);
  width: 100%;
  min-height: 100%; 
  padding-bottom:18px;
  .top{
    .logo{
      position:absolute;
      top: 35px;
      left: 24%;
      width:196px;
    }
  }
  .content{
     background:#fff;
     margin:0 15px;
     border-radius:5px;
     position: relative;
     padding:50px 20px 20px;
     .contentImg{
       position: absolute;
       width:79px;
       right:19px;
       top:22px;
     }
    .contentText{
      font-size: 16px;
      color: #F88110;
      .contentFlex{
        display:flex;
        padding-left: 20px;
        .circle{
          width:30px;
          height:30px;
          font-size:20px;
          color:#fff;
          text-align: center;
          background: #ffeb3b;
          border-radius: 50%;
          margin-right:10px;
        }
        .circleImg{
          width:4px;
          height:22px;
          margin: 3px 13px;
          background: url("../../assets/images/myInfo/lineShare.png") no-repeat;
          background-size:100% 100%;

        }
      }
    }
    .shareBtn{
      height:40px;
      line-height: 40px;
      background: #E6402A;
      color: #fff;
      font-size: 16px;
      text-align: center;
      border-radius: 20px;
      box-shadow: 0px 5px 3px #F75935;
      margin:25px 0 0;
    }
    .nameStyle{
      padding-top:25px;
      color:#999;
      font-size:14px;
      width:220px;
      margin:0 auto;
      text-align: center;
      p{
        padding-top:10px;
      }
    }
    #qrcode{
      width:128px;
      height:128px;
      margin:50px auto;
      img{
        width:100%;
      }
    }
  }
  .oneShare{
    position: absolute;
    bottom: 310px;
    right: -8px;
    z-index: 1;
    width: 53px;
  }
 	.cover{
			position:fixed;
			width: 100%;
			top: 0;
			height: 100%;
			z-index:999;
      // background: rgba(0,0,0,0.6);
      text-align:left;
      overflow-y: scroll;
			img{
	      position: absolute;
				top: 0;
				// right:10px;
			}
			.coverText{
				color: #fff;
				margin:150px 40px 0;
				width: 100%;
				font-size: 20px;
			}
		}

}
</style>

